<template>
  <div>
    <h2>双向绑定指令及其修饰符</h2>

    <!-- 以现有的知识来实现双向绑定 -->
    <!-- <input type="text" :value="str" @input="str = $event.target.value" /> -->

    <!-- 直接使用vue提供的双向绑定指令 -->
    <input type="text" v-model.trim="str" /><br />
    <input type="text" v-model.number="age" /><br />
    <input type="text" v-model.lazy="uname" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      str: '你好世界',
      age: 20,
      uname: 'lisi'
    }
  }
}
</script>
